<template>
	<view>
		<my-popup v-show="isOpen">
			<!-- 当侧边栏被点击 进行展示 -->
			<view class="popup-box" v-if="isState==='1'">
				<view class="title">
					添加功能
				</view>
				<view class="body">
					<view class="word" :class="{'.popup-online3': bg ==='bg1','.popup-online4': bg ==='bg2'}"
						:style="{paddingBottom:'20rpx'}" v-for="(item,index) in featureData" :key="index" @click="itemClick(index)">
						{{item}}
					</view>
				</view>
				<view class="footer" @click="itemClick1">
					确定
				</view>
			</view>
			<!-- 选中一个功能 -->
			<view class="popup-box-item" v-else-if="isState==='2'">
				<view class="btn" :style="{backgroundImage: (bg === 'bg1'? btnImg.backgroundImage1 : btnImg.backgroundImage2 )}"
					@click="itembtnClick">
					保存当前点击方案
				</view>
				<view :class="{'.popup-online1': bg ==='bg1','.popup-online2': bg ==='bg2'}">
				</view>
				<view class="btn" :style="{backgroundImage: (bg === 'bg1'? btnImg.backgroundImage1 : btnImg.backgroundImage2 )}"
					@click="itembtnClick">
					另存为
				</view>
			</view>
		</my-popup>
	</view>
</template>

<script>
	export default {
		name: "my-popup-popup",
		data() {
			return {
				bg: this.$store.state.theme.currentBackground,
				isState: '1',
				isOpen: true,
				featureData: ['点击', '滑动', '双击', '长按'],
				btnImg: {
					backgroundImage1: 'url(' + require('@/static/style1/zh5.png') + ')',
					backgroundImage2: 'url(' + require('@/static/style2/zh5.png') + ')',
				},
			};
		},
		methods: {
			// 确认按钮点击
			itemClick1() {
				// 成功提示
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000
				})
				this.isOpen = false
			},
			itemClick(index) {
				console.log(index);
				this.isState = '2'
			},
			itembtnClick() {
				this.isState = '0'
				this.isOpen = false
				// 成功提示
				uni.showToast({
					title: '保存成功',
					icon: 'success',
					duration: 2000
				})
			}
		}
	}
</script>

<style lang="scss">
	.popup-box {
		// border: 1px solid red;
		width: 80%;
		position: relative;

		.title {
			font-size: 40rpx;
		}

		.body {
			.word {
				margin-top: 30rpx;
				// margin-left: 0rpx;
				// border-bottom: ;
			}
		}

		.footer {
			margin-top: 40rpx;
			position: absolute;
			right: 0;
		}
	}

	.popup-box-item {
		color: white;

		// width: 80%;
		.btn {
			// border: 1px solid red;
			width: 200px;
			height: 100rpx;
			margin: 40rpx 0;
			display: flex;
			align-items: center;
			justify-content: center;
			// background-image: url('@/static/style1/zh5.png');
			background-position: center center;
			background-repeat: no-repeat;
			background-size: 380rpx 90rpx;
		}
	}
</style>